<template>
    <div>
        <Card>
            <!--查询条件-->
            <Row class="form-row">
                <Form :model="filters" ref="form1" label-position="right" :label-width="90" inline>
                    <FormItem label="物业名称" prop="name">
                        <div class="filters-input">
                            <Input v-model="filters.deptName" clearable placeholder="物业名称" />
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" size="large" @click="loadData">
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            </Row>
            <!--功能按钮-->
            <Row class="form-row">
                <Button type="primary" icon="md-add" size="large" @click="openAdd()">新增</Button>
            </Row>
            <!--数据列表-->
            <el-table stripe border :loading="tableLoading" :data="tableData" size="large" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="deptName" label="物业名称"></el-table-column>
                <el-table-column prop="dingTalkAgentId" label="钉钉AgentId"></el-table-column>
                <el-table-column prop="dingTalkSuiteTicket" label="钉钉suiteTicket"></el-table-column>
                <el-table-column prop="dingTalkCorpId" label="钉钉corpId"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="openModify(scope.row.id)">修改</el-button>
                        <el-button size="mini" type="danger" @click="openDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
            <!--新增页面-->
            <Modal v-model="addVisible">
                <Form :model="adds" ref="adds" label-position="right" :label-width="90" inline>
                    <FormItem label="物业">
                        <div>
                            <el-select v-model="adds.deptName" @change="deptChange" placeholder="请选择物业" filterable no-data-text="暂无数据">
                                <el-option v-for="item in deptList" :key="item.id" :value="item" :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="钉钉AgentId">
                        <Input v-model="adds.dingTalkAgentId"></Input>
                    </FormItem>
                    <FormItem label="钉钉suiteTicket">
                        <Input v-model="adds.dingTalkSuiteTicket"></Input>
                    </FormItem>
                    <FormItem label="钉钉corpId">
                        <Input v-model="adds.dingTalkCorpId"></Input>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="text" size="large" @click="onCancel">取消</Button>
                    <Button type="primary" size="large" @click="handleSubmit">确定</Button>
                </div>
            </Modal>
            <!--修改页面-->
            <Modal v-model="modifyVisible">
                <Form :model="modifys" ref="modifies" label-position="right" :label-width="90" inline>
                    <FormItem label="钉钉AgentId">
                        <Input v-model="modifys.dingTalkAgentId"></Input>
                    </FormItem>
                    <FormItem label="钉钉suiteTicket">
                        <Input v-model="modifys.dingTalkSuiteTicket"></Input>
                    </FormItem>
                    <FormItem label="钉钉corpId">
                        <Input v-model="modifys.dingTalkCorpId"></Input>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="text" size="large" @click="onCancel">取消</Button>
                    <Button type="primary" size="large" @click="handleModify">确定</Button>
                </div>
            </Modal>
        </Card>
    </div>
</template>

<script>
    export default {

        data(){
            return {
                pageNum: 1,
                pageSize: 10,
                pageTotal: 0,
                
                deptList:[],
                tableData:[],

                filters:{},
                adds:{},
                modifys:{},

                tableLoading:false,
                addVisible:false,
                modifyVisible:false,
            }
        },

        created:function(){
            this.loadData();
        },

        methods:{
            loadData:function(){
                this.tableLoading=true;
                this.filters.pageNum=this.pageNum;
                this.filters.pageSize=this.pageSize;
                this.postRequest("/api/dept/config/deptConfigs",this.filters).then(resp=>{
                    if (resp.code==20000){
                        this.tableData=resp.data.list;
                        this.pageTotal=resp.data.total;
                        this.tableLoading=false;
                    }
                });
            },
            openAdd:function () {
                this.getRequest("/api/housing/openModel").then(resp=>{
                    if (resp.code==20000){
                        this.deptList=resp.data.deptList;
                        this.addVisible=true;
                    }
                });
            },
            deptChange:function(value){
                this.adds.deptId=value.id;
                this.adds.deptName=value.name;
            },
            handleSubmit:function(){
                this.postRequest("/api/dept/config/save",this.adds).then(resp=>{
                    if (resp.code==20000){
                        this.$Message.success("新增成功");
                        this.addVisible=false;
                        this.loadData();
                    }
                });
            },
            openModify:function(id){
                this.modifyVisible=true;
                this.getRequest("/api/dept/config/modify?id="+id).then(resp=>{
                    if (resp.code==20000){
                        this.modifys=resp.data;
                    }
                });
            },
            handleModify:function(){
                this.postRequest("/api/dept/config/save",this.modifys).then(resp=>{
                    if (resp.code==20000){
                        this.$Message.success("更新成功");
                        this.modifyVisible=false;
                        this.loadData();
                    }
                });
            },
            openDelete:function(id){
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该条记录？",
                    onOk: () => {
                        this.getRequest("/api/dept/config/remove/?id="+id).then(res => {
                            this.tableLoading = false;
                            if (res.code == 20000) {
                                this.$Message.success("删除成功!");
                                this.pageNum = 1;
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            onCancel:function () {
                this.addVisible=false;
                this.modifyVisible=false;
            },
            handlePage:function (value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize:function (value) {
                this.pageSize = value;
                this.loadData();
            }
        },
    }
</script>
